<template>
    <div class="pageContainer">
        <div class="searchWarp">
            <template v-for="condition in listCondition">
                <CCondition :condition="condition"></CCondition>
            </template>
            <div class="schLine">
                <CBtn @click="search(1)">查询</CBtn>
            </div>
        </div>
        <div class="treeTable">
            <div style="flex:1;">
                <div class="btnWarp">
                    <!-- <CBtn @click="showEdit">新增</CBtn>
                    <CBtn>批量删除</CBtn> -->
                </div>
                <CPageTable :data="tableData" :curPage="paging.curPage" :total="paging.total" @changeSize="changeSize" @changePage="search">
                    <template slot-scope="scope">
                        <CBtn type="text" @click="showDetail(scope.row)">详情</CBtn>
                        <CBtn type="text" @click="showSend(scope.row)" v-if="scope.row.status == 1 && scope.row.order_type === '商超订单'">发货</CBtn>
                        <CBtn type="text" @click="showReciveCloth(scope.row)" v-if="scope.row.status == 2 && scope.row.order_type === '干洗订单'">已取衣</CBtn>
                        <CBtn type="text" @click="showPrint(scope.row)" v-if="scope.row.order_type === '干洗订单' && (scope.row.status == 3 || scope.row.status == 4 || scope.row.status == 5 || scope.row.status == 6)" >打印水洗标</CBtn>
                        <CBtn type="text" @click="showFinishWash(scope.row)" v-if="(scope.row.status == 3 || scope.row.status == 4 || scope.row.status == 5) && scope.row.order_type === '干洗订单'">完成洗衣</CBtn>
                    </template>
                </CPageTable>
            </div>
        </div>
        <CDailog title="取衣完成，打印水洗标" :isShow="isShowRecive" @close="isShowRecive = false" @enter="doSaveRecive">
            <el-form :inline="true">
                <CText :readonly="true" v-model="order.orderNo" title="订单编号" field="title"></CText>
                <div style="display:flex;">
                    <CText :readonly="true" v-model="curprinter" title="当前打印机" field="title"></CText>
                    <CBtn type="text" @click="rescanPrint">重新识别</CBtn>
                </div>
                <div>
                    <el-table :data="listOrderProduct">
                        <el-table-column label="未洗前图片">
                            <template slot-scope="scope">
                                <el-image
                                style="max-width: 100px; max-height: 100px"
                                :src="scope.row.imgCloth"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column  label="衣物问题" width="400">
                            <template slot-scope="scope">
                                <CCheckbox  opType="clothQuesionts" v-model="scope.row.clothQuestions" field="clothQuestions"></CCheckbox>
                            </template>
                        </el-table-column>
                        <el-table-column  label="水洗标签码" width="200">
                            <template slot-scope="scope">
                                <CText  :readonly="true" v-model="scope.row.washCode" field="washCode"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column  label="操作" style="width:500px">
                            <template slot-scope="scope">
                                <CBtn type="text" @click="doPrint(scope.row, scope.$index)">打印</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form>
        </CDailog>

        <CDailog title="打印水洗标签码" :isShow="isShowPrint" @close="isShowPrint = false" @enter="doPrint">
            <el-form :inline="true">
                <CText :readonly="true" v-model="order.orderNo" title="订单编号" field="title"></CText>
                <CText :readonly="true" v-model="curprinter" title="当前打印机" field="title"></CText>
                <div style="width:600px">
                    <el-table :data="listOrderProduct">
                        <el-table-column label="未洗前图片">
                            <template slot-scope="scope">
                                <el-image
                                style="max-width: 100px; max-height: 100px"
                                :src="scope.row.imgCloth"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column  label="水洗标签码" style="width:500px">
                            <template slot-scope="scope">
                                <CText :readonly="true" v-model="scope.row.washCode" field="washCode"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column  label="操作" style="width:500px">
                            <template slot-scope="scope">
                                <CBtn type="text" @click="doPrint(scope.row)">打印</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form>
        </CDailog>
        <CDailog title="完成洗衣" :isShow="isShowFinish" @close="isShowFinish = false" @enter="doPrint">
            <el-form :inline="true">
                <div>扫描衣物上的条形码完成洗衣</div>
                <div style="width:600px">
                    <el-table :data="listOrderProduct">
                        <el-table-column label="下单时间">
                            <template slot-scope="scope">
                                <span>{{scope.row.createTime}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="未洗前图片">
                            <template slot-scope="scope">
                                <el-image :preview-src-list="[scope.row.imgCloth]"
                                style="max-width: 100px; max-height: 100px"
                                :src="scope.row.imgCloth"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column  label="水洗标签码" style="width:500px">
                            <template slot-scope="scope">
                                <CText :readonly="true" v-model="scope.row.washCode" field="washCode"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column  label="状态" style="width:500px">
                            <template slot-scope="scope">
                                <span>{{washStatus[scope.row.washStatue + '']}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form>
        </CDailog>

        <CDailog title="发货" :isShow="isShowSend" @close="isShowSend = false" @enter="doSend">
            <el-form :inline="true">
                <CText :readonly="true" v-model="order.orderNo" title="订单编号" field="title"></CText>
                <CText :readonly="true" v-model="curprinter" title="当前打印机" field="title"></CText>
                <div>
                    收货地址：{{order.reciveAddress}}   
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    收货人：{{order.reciveUserName}}
                    &nbsp;&nbsp;&nbsp;&nbsp;   
                    收货人电话：{{order.reciveTel}}
                </div>
                <div style="margin: 20px 0px 0px 0px">

                    <CBtn  @click="doPrintSend">打印送货单</CBtn>
                </div>
                <div style="width:600px">
                    <el-table :data="listOrderProduct">
                        <el-table-column label="商品名称">
                            <template slot-scope="scope">
                                {{ scope.row.productName }}
                            </template>
                        </el-table-column>
                        <el-table-column  label="商品价格" style="width:500px">
                            <template slot-scope="scope">
                                {{ scope.row.productPrice }}
                            </template>
                        </el-table-column>
                        <el-table-column  label="数量" style="width:500px">
                            <template slot-scope="scope">
                                {{ scope.row.productCount }}
                            </template>
                        </el-table-column>
                        <el-table-column  label="小计" style="width:500px">
                            <template slot-scope="scope">
                                {{ scope.row.productTotal }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form>
        </CDailog>

        <CDailog title="订单详情" :isShow="isShowDetail" @close="isShowDetail = false" :isShowEnter="false">
            <OrderDetail :id="detailid"></OrderDetail>
        </CDailog>
        
    </div>
</template>

<script>
import pagingMixin from '@/mixin/pagingMixin'
import vueEasyPrint from "vue-easy-print";
import tscDriver from "@/utils/tscDriver";
import orderStatus from "@/config/orderStatus";
import OrderDetail from './OrderDetail.vue';
import "@/utils/base64";
export default {
    components: {
        vueEasyPrint,
        OrderDetail
    },
    mixins: [pagingMixin],
    data() {
        return {
            model: "oms",
            table: "OmsScxOrder",
            isShowRecive: false,
            order: {},
            listOrderProduct: [],
            listPrinter: [],
            isShowPrint: false,
            printConfig: {},
            isShowFinish: false,
            scanedWashCode: "",
            isStart: false,
            washStatus: orderStatus.washStatus,
            isShowSend: false,
            isShowDetail: false,
            detailid: ""
        }
    },
    created() {
        this.rescanPrint();
        this.templateId = "881cc0ad-2d59-41d5-a4e6-d440a22fafa8";
        
        //取得查询条件
        this.$sys.getPageConditions({id: this.templateId}).then(res => {
            this.listCondition = res.data;
        })
        //查询表格数据
        this.search(1);

        this.$sys.getById("sys", "SysConfig", {id: "printer-config"}).then(res => {
            this.printConfig = JSON.parse(res.data.configVal);
        })
        
        
    },
    computed:{
        curprinter() {
            if (this.listPrinter.length > 0) {
                return this.listPrinter[0].name;
            } else {
                return "未识别到打印机";
            }
        }
    },
    methods: {
        showDetail(row) {
            this.isShowDetail = true;
            this.detailid = row.id;
        },
        rescanPrint() {
            tscDriver.setup(this);
            //获取打印机
            tscDriver.getPrinterList();
        },
        doPrintSend() {
            let listWord = [];
            listWord.push("订单编号：" + this.order.orderNo);
            listWord.push("下单时间：" + this.order.orderTime);
            listWord.push("收货地址：" + this.order.reciveAddress);
            listWord.push("收货人：" + this.order.reciveUserName);
            listWord.push("收货电话：" + this.order.reciveUserName);
            tscDriver.printSend(listWord, this.printConfig).then(res => {
                if (200 == res.code) {
                    this.$message.success("打印完毕");
                }
            });
        },
        doSend() {
            this.$scx.saveSCSend({orderid: this.order.id}).then(res => {
                if (200 == res.code) {
                    this.$message.success("发货成功");
                    this.search();
                    this.isShowSend = false;
                } else {
                    this.$message.error("发货失败");
                }

            })
        },
        showSend(row) {
            this.$scx.getOrderDetailById({id: row.id}).then(async res => {
                this.order = res.data.order;
                this.listOrderProduct = res.data.listOrderProduct;
                this.isShowSend = true;
            })
        },
        startScannerHandler() {
            if (!this.isStart) {
                this._scanner = this.$scanner({
                    callback: vcode => {
                        this.scanedWashCode = vcode;
                        this.$scx.doGetOrderProductByWashCode({code: this.scanedWashCode}).then(res => {
                            if (res.code == 200) {
                                this.listOrderProduct.push(res.data);
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }
                });
            } else {
                this._scanner.cancel();
            }
            this.isStart = !this.isStart;
        },
        showFinishWash() {
            this.isShowFinish = true;
            //开启扫码枪
            this.startScannerHandler();
        },
        showPrint(row){
            this.$scx.getOrderDetailById({id: row.id}).then(async res => {
                this.order = res.data.order;
                this.listOrderProduct = res.data.listOrderProduct.map(item => {
                    return {
                        ...item, clothQuestions: []
                    }
                });
                this.isShowPrint = true;
            })
        },
        doPrint(row, index) {
            if (this.listPrinter.length <= 0) {
                this.$message.info("未识别到打印机，请重试");
                return;
            }
            // 打印条形码
            let listWord = [4];
            listWord[0] = "订单编号：" + this.order.orderNo;
            listWord[1] = `${row.productName} 总件数:${index + 1}/${this.listOrderProduct.length}`;
            listWord[2] = "瑕疵：" + row.clothQuestions.join(" ");
            listWord[3] = `下单时间：${this.order.orderTime}`;
            listWord[4] = `客户：${this.order.reciveUserName} 电话：${this.order.reciveTel}`;
            tscDriver.printCode(row.washCode, this.printConfig, listWord);
        },
        async showReciveCloth(row) {
            this.$scx.getOrderDetailById({id: row.id}).then(async res => {
                let codeProfix = this.$u.getNumDate();
                this.order = res.data.order;
                for (let orderProduct of res.data.listOrderProduct) {
                    let newRes = await this.$scx.doNewSequence({code: "washType"})
                    orderProduct.washCode = codeProfix + "" + newRes.data;
                }
                this.listOrderProduct = res.data.listOrderProduct.map(item => {
                    return {
                        ...item, clothQuestions: []
                    }
                });
                this.isShowRecive = true;
            })
        },
        //保存上门收衣
        doSaveRecive() {
            this.$scx.saveOrderReciveCloth({
                orderId: this.order.id,
                listOrderProduct: this.listOrderProduct 
            }).then(res => {
                if (200 == res.code) {
                    this.$message.success("操作成功");
                    this.isShowRecive = false;
                    this.search();
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>

</style>